<template>
  <div class="subscriber">
    <nav-top title="常用预约用户"
             :goback="true"></nav-top>
    <div class="img"
         v-if="!showList">
      <img src="/static/img/member/noUser.png" />
    </div>
    <div v-if="!showList">
      <button class="add"
              @click="addUser">添加常用预约用户</button>
    </div>
    <div v-if="showList">
      <div v-for="(val,key) in userList"
           :key="key"
           class="form"
           :class="{'one': key == 0}">
        <div :class="{ 'input-list-hidden' : active !== key }">
          <div>
            <van-field v-if="val.edit"
                       class="input"
                       v-model="val.fullName"
                       label-width="6.875rem"
                       type="tel"
                       placeholder="请输入姓名">
              <span class="input-label"
                    slot="label">姓名(中文)</span>
            </van-field>
            <div class="disable"
                 v-else>
              <span class="input"
                    slot="label">姓名(中文)</span>
              <span class="input"
                    slot="label">{{val.fullName}}</span>
            </div>
          </div>
          <div>
            <van-field v-if="val.edit"
                       class="input"
                       v-model="val.surName"
                       label-width="4.687rem"
                       placeholder="请输入姓(拼音)">
              <span class="input-label"
                    slot="label">姓(拼音)</span>
            </van-field>
            <div class="disable"
                 v-else>
              <span class="input"
                    slot="label">姓(拼音</span>
              <span class="input"
                    slot="label">{{val.surName}}</span>
            </div>
          </div>
          <div>
            <van-field v-if="val.edit"
                       class="input"
                       v-model="val.name"
                       label-width="4.687rem"
                       placeholder="名(拼音) san">
              <span class="input-label"
                    slot="label">名(拼音)</span>
            </van-field>
            <div class="disable"
                 v-else>
              <span class="input"
                    slot="label">名(拼音)</span>
              <span class="input"
                    slot="label">{{val.name}}</span>
            </div>
          </div>
          <div>
            <van-field v-if="val.edit"
                       class="input"
                       v-model="val.certificate"
                       label-width="4.687rem"
                       placeholder="请输入姓(拼音)">
              <span class="input-label"
                    slot="label">证件号</span>
            </van-field>
            <div class="disable"
                 v-else>
              <span class="input"
                    slot="label">证件号</span>
              <span class="input"
                    slot="label">{{val.certificate}}</span>
            </div>
          </div>
          <div>
            <van-field v-if="val.edit"
                       class="input"
                       v-model="val.sex"
                       label-width="4.687rem"
                       placeholder="请输入姓(拼音)">
              <span class="input-label"
                    slot="label">性别</span>
            </van-field>
            <div class="disable"
                 v-else>
              <span class="input"
                    slot="label">性别</span>
              <span class="input"
                    slot="label">{{val.sex}}</span>
            </div>
          </div>
          <div>
            <van-field v-if="val.edit"
                       class="input"
                       v-model="val.phone"
                       label-width="4.687rem"
                       placeholder="请输入姓(拼音)">
              <span class="input-label"
                    slot="label">手机号码</span>
            </van-field>
            <div class="disable"
                 v-else>
              <span class="input"
                    slot="label">手机号码</span>
              <span class="input"
                    slot="label">{{val.phone}}</span>
            </div>
          </div>
          <div>
            <van-field v-if="val.edit"
                       class="input"
                       v-model="val.code"
                       label-width="4.687rem"
                       placeholder="请输入姓(拼音)">
              <span class="input-label"
                    slot="label">微信号</span>
            </van-field>
            <div class="disable"
                 v-else>
              <span class="input"
                    slot="label">微信号</span>
              <span class="input"
                    slot="label">{{val.code}}</span>
            </div>
          </div>
        </div>
        <div class="operate">
          <van-radio-group v-model="radio">
            <van-radio class="default"
                       :name="val"
                       checked-color="#07c160">
              <img class="radio-icon"
                   slot="icon"
                   slot-scope="props"
                   :src="props.checked ? '/static/icon/select-select.png' : '/static/icon/select-none.png'" />默认
            </van-radio>
          </van-radio-group>
          <van-icon @click="switchStatus(key)"
                    class="expand"
                    :name="(active !== key) ? 'arrow-up' : 'arrow-down'" />
          <div class="delete">
            <img src="/static/icon/subscriber/delete.png"
                 alt /> 删除
          </div>
          <div class="edit"
               @click="edit(val)">
            <img src="/static/icon/subscriber/edit.png"
                 alt /> 编辑
          </div>
        </div>
      </div>
      <van-button @click="submit"
                  class="submit"
                  type="primary"
                  size="large">提交</van-button>
    </div>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";

export default {
  components: {
    NavTop
  },
  watch: {
    radio (newVal) {
      console.log(newVal);
    }
  },
  name: "Subscriber",
  data () {
    return {
      active: 0,
      radio: "",
      userList: [
        {
          fullName: "张三",
          surName: "zhang",
          name: "san",
          certificate: "12341234123412341234",
          sex: "男",
          phone: 13800138000,
          code: 138001378000
        },
        {
          fullName: "张三",
          surName: "zhang",
          name: "san",
          certificate: "123456",
          sex: "男"
        }
      ],
      showList: false
    };
  },
  mounted () {
    if (this.userList.length > 0) {
      this.showList = true;
    }
  },
  methods: {
    switchStatus (key) {
      this.active = key == this.active ? -1 : key;
    },
    edit (val) {
      this.$set(val, "edit", true);
    },
    addUser () {
      this.$router.push("/addCommonUser");
    },
    submit () {
      this.$store.dispatch("appointmen/selectUser", this.radio);
      this.$router.push("/appointmentAdd");
    }
  }
};
</script>
<style lang='scss' scoped>
.subscriber {
  height: 690px;
  background: #f8f8f8;
  .one {
    margin-top: 46px !important;
  }
  .form {
    margin-top: 10px;
    .input-list-hidden {
      height: 126px;
      overflow: hidden;
    }
    .disable {
      height: 41px;
      background: #ffffff;
      border-bottom: 1px solid #ececec;
      .input {
        display: inline-block;
        min-width: 60px;
        position: relative;
        padding: 0px;
        padding-left: 13px;
        padding-right: 13px;
        padding-bottom: 11px;
        border-bottom: none;
        font-size: 13px;
        line-height: 41px;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
    }
    .input {
      position: relative;
      padding: 0px;
      padding-top: 11px;
      padding-left: 13px;
      padding-right: 13px;
      padding-bottom: 11px;
      border-bottom: 1px solid #ececec;
      font-size: 13px;
      line-height: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      .input-label {
        font-size: 11px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
      }
      ::-webkit-input-placeholder {
        color: rgba(214, 214, 214, 1);
      }
      .send-code {
        height: 16px;
        line-height: 1px;
        font-size: 12px;
        background: #fff;
        color: #4d39c6;
        border: none;
      }
    }
    .default {
      float: left;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      margin: 13px 0 0 8px;
      .radio-icon {
        position: relative;
        top: 3px;
        left: 8px;
        width: 16px;
        height: 15px;
      }
    }
    .operate {
      height: 41px;
      background: #fff;
      .expand,
      .edit,
      .delete {
        float: right;
        height: 11px;
        margin-right: 5px;
        margin-top: 10px;
        span {
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
        }
      }
      .edit,
      .delete {
        margin-right: 14px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        img {
          position: relative;
          top: 3px;
        }
      }
      .edit img {
        margin-top: 2px;
        width: 17px;
        height: 15px;
      }
      .delete img {
        width: 14px;
        height: 18px;
      }
      .expand {
        margin-right: 7px;
        margin-top: 15px;
        width: 15px;
        height: 11px;
      }
    }
  }
  .submit {
    width: 279px;
    height: 44px;
    margin: 83px 20.5px 0 20.5px;
    // position: absolute;
    // left: 21px;
    // bottom: 15px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: #06a44f;
    border: none;
  }
  .img {
    width: 320px;
    height: 129px;
    padding: 174px 0 0 0;
    img {
      width: 320px;
      height: 129px;
    }
  }
  .add {
    width: 279px;
    height: 44px;
    margin: 120px 20.5px 0 20.5px;
    // position: absolute;
    // left: 21px;
    // bottom: 15px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: #06a44f;
    border: none;
  }
}
.white {
  background: #fff !important;
}
</style>
